<template>
  <div class="range">
    <input
      type="range"
      name=""
      id=""
      v-model="val"
      :style="{ background: generateBackground }"
    />
    <div class="val">{{ val }}</div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    const val = ref(0);
    const rangeDom = ref<HTMLElement>();
    const generateBackground = computed(() => {
      //淡紫色,紫色,浅白,白色
      return `linear-gradient(to right, #6c5ce7, #5f27cd ${val.value}%, #d3edff ${val.value}%, #dee1e2 100%)`;
    });
    return { val, rangeDom, generateBackground };
  },
});
</script>
<style lang="scss" scoped>
.range {
  width: 20rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    height: 13px;
    border-radius: 6px;
    background: #f1f1f1;
    outline: none;
    padding: 0;
    margin: 0;
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #7a00ff;
      border: #f9ca24 5px solid;
      cursor: pointer;
      -webkit-transition: background 0.15s ease-in-out;
      transition: background 0.15s ease-in-out;
    }
    &::-webkit-slider-thumb:hover {
      background: #f0932b;
    }
    // &::-moz-range-thumb {
    //   width: 20px;
    //   height: 20px;
    //   border: 0;
    //   border-radius: 50%;
    //   background: #f0932b;
    //   border: #f9ca24 5px solid;
    //   cursor: pointer;
    //   -webkit-transition: background 0.15s ease-in-out;
    //   transition: background 0.15s ease-in-out;
    // }
    // &::-moz-range-thumb:hover {
    //   background: #f9ca24;
    // }

    // /* remove border */
    // &::-moz-focus-inner,
    // &::-moz-focus-outer {
    //   border: 0;
    // }
  }
  .val {
    border-left: #e6e4e4 1px solid;
    padding-left: 1rem;
    margin-left: 1rem;
    min-width: 3rem;
    color: #3c3b3b;
  }
}
</style>
